<template>
  <div class='container'>

    <el-card class="box-card">
      <el-row>
        <el-col :span="18">
          <el-form
            label-width="80px"
            inline
          >
            <el-form-item label="活动名称">
              <el-input
                placeholder="关键字搜索"
                v-model="subject_search.subjectName"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button
                type="primary"
                @click="search()"
              >搜索</el-button>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span='6'>
          <el-button
            type="success"
            icon="el-icon-edit"
            class="subject-button-jia"
            @click="open"
          >增加学科</el-button>
        </el-col>
      </el-row>

      <el-alert
        type="info"
        show-icon
        :closable='false'
        style="margin-bottom:15px"
      >
        <template slot="title">
          一共有{{total}}条消息
        </template>
      </el-alert>

      <el-table
        :data="lists"
        style="width: 100%"
        class="subject-table"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="创建者"
        >
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay===1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
        >
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签"
        >
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量"
        >
        </el-table-column>
        <el-table-column
          width="230px"
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <el-link
              @click="toDirectorys(scope.row)"
              :underline="false"
              type="primary"
            >学科分类</el-link>
            <el-link
              @click="toTags(scope.row)"
              :underline="false"
              type="primary"
            >学科标签</el-link>
            <el-link
              :underline="false"
              type="primary"
              @click="subjectChange(scope.row)"
            >修改</el-link>
            <el-link
              :underline="false"
              type="primary"
              @click="delSubject(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pages"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="subject_search.page"
        :page-size="subject_search.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[5,10,20,50]"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="增加学科"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        ref="form"
        label-width="80px"
      >
        <el-form-item label="学科名称">
          <el-input
            v-model="subject_search.subjectName"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否显示"
          prop="delivery"
        >
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="getchange($event)"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="add_btn"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          class="add_btn"
          type="primary"
          @click="change_btn"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改学科"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form
        ref="form"
        label-width="80px"
      >
        <el-form-item label="学科名称">
          <el-input
            v-model="subject_search.subjectName"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否显示"
          prop="delivery"
        >
          <el-switch
            v-model="value"
            @change="getchange($event)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="add_btn"
          @click="dialogVisible1 = false"
        >取 消</el-button>
        <el-button
          class="add_btn"
          type="primary"
          @click="change_btnn"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, update } from '@/api/hmmm/subjects'
export default {

  name: 'subjects',
  components: {},
  props: {},
  data () {
    return {
      lists: [],
      dialogVisible: false,
      dialogVisible1: false,
      subject_search: {
        page: 1,
        pagesize: 10,
        subjectName: '',
        isFrontDisplay: 0,
        id: ''
      },
      total: 0,
      value: 1

      // subjectAdd: {
      //   subjectName: ''

      // }
    }
  },
  computed: {},
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data } = await list(this.subject_search)

      this.lists = data.items
      this.total = data.counts
    },
    handleCurrentChange (newPage) {
      this.subject_search.page = newPage
      this.getList()
    },
    handleSizeChange (newSize) {
      this.subject_search.pagesize = newSize
      this.getList()
    },
    search () {
      this.getList()
    },
    clear () {
      this.subject_search.subjectName = null
    },
    open () {
      this.dialogVisible = true
    },
    toDirectorys (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'directorys', query: { id, name } })
    },
    toTags (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'tags', query: { id, name } })
    },
    delSubject (id) {
      this.$confirm('删除该学科，是否继续？', '温馨提示', {
        confirmButtonText: ' 确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.message.success('删除成功')
      }).catch(e => { })
      this.getList()
    },
    getchange (v) {
      console.log(v)
      //  console.log(111)
      if (v) {
        this.subject_search.isFrontDisplay = 1
      } else {
        this.subject_search.isFrontDisplay = 0
      }
    },
    async change_btn () {
      try {
        const { data } = await add({
          subjectName: this.subject_search.subjectName,
          isFrontDisplay: this.subject_search.isFrontDisplay,

          id: this.subject_search.id
        })
        console.log(data)
      } catch (ree) {

      }
      this.dialogVisible = false
      this.subject_search.subjectName = ''
      this.getList()
    },
    subjectChange (row) {
      this.subject_search.id = row.id
      console.log(row)
      this.dialogVisible1 = true
    },
    async change_btnn () {
      try {
        const { data } = await update({
          subjectName: this.subject_search.subjectName,
          isFrontDisplay: this.subject_search.isFrontDisplay,
          id: this.subject_search.id
        })
        console.log(data)
      } catch (ree) {

      }
      this.dialogVisible1 = false
      this.subject_search.subjectName = ''
      this.getList()
    }

  }
}
</script>

<style scoped lang='scss'>
.subject-table {
  font-size: 12px;
}
// .el-col {
//   display: flex;
// }
.subject-button {
  margin-left: 10px;
}
.subject-button-jia {
  float: right;
}
.el-link {
  margin-right: 10px;
}

.pages {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
